<template>
  <div class="card bg-white p-3 mt-3">
    <div
      class="card-header d-flex ai-center"
      :class="{ 'border-bottom': !plain, 'pb-3': !plain }"
    >
      <i class="iconfont" :class="`icon-${icon}`"></i>
      <div class="fs-xl flex-1 px-2" :class="{ 'f-weight': plain }">
        {{ title }}
      </div>
      <i class="iconfont icon-menu1" v-if="!plain"></i>
    </div>
    <!-- card 主体内容 -->
    <div class="card-body pt-3">
      <slot></slot>
    </div>
    <!-- card 主体内容 -->
  </div>
</template>

<script>
export default {
  props: {
    title: { type: String },
    icon: { type: String },
    // 控制是否有 ...图标
    plain: { type: Boolean },
  },
};
</script>

<style lang="scss">
@import "../assets/scss/variables";

.card {
  border-bottom: 1px solid $border-color;
}
</style>
